<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        table 整张表格
             thead 表头 可以省略不写
             tbody 表体 可以省略不写
             tfoot 表尾 可以省略不写
                tr 表格中的一行
                    td 行中的一个单元格
                    th 自带加粗居中效果的td
    
    -->
     <!-- systle  CS样式 可以修改样式  -->               
    <h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table border="3px" style="margin: 0px auto; width: 300px;">
        <thead>
            <tr>
                <td>排名</td>
                <td>姓名</td>
                <td>分数</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <th>张三</th>
                <th>78</th>
            </tr>
            <tr>
                <th>2</th>
                <th>李四</th>
                <th>90</th>
            </tr>
            <tr>
                <th>3</th>
                <th>王五</th>
                <th>59</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>平均数</th>
                <th>88</th>
            </tr>
        </tfoot>
    </table>


    <!--单元格跨行 rowspan = "数" 只需要使用一次-->
    <h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table border="3px" style="margin: 0px auto; width: 300px;">
        <thead>
            <tr>
                <td>排名</td>
                <td>姓名</td>
                <td>分数</td>
                <td>备注</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <th>张三</th>
                <th>78</th>
                <th rowspan="3">前三名升职加薪 </th>
            </tr>
            <tr>
                <th>2</th>
                <th>李四</th>
                <th>90</th>
            </tr>
            <tr>
                <th>3</th>
                <th>王五</th>
                <th>59</th>
            </tr>
        </tbody>
    </table>
<!-- 单元格跨列 colspen = 需要一次要一次 -->
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
    <table  border="1px" style="width: 400px; margin: 0px auto;">
        <tr>
            <td>排名</td>
            <td>姓名</td>
            <td>分数</td>
            <td>备注</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张小明</td>
            <td>100</td>
            <td rowspan="6">
                前三名升职加薪
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td></td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
        <tr>
            <th> 平均数</th>
            <th colspan="2"> 88</th>
        </tr>
        <tr>
            <th>总人数</th>
            <th colspan="2">3</th>
        </tr>
        <tr>
            <th>??</th>
            <th colspan="2">??</th>
        </tr>

    </table>

   
</body>
</html>